<template>
  <div class="goods">
    <goodleft :listleft="listleft" :chageindex="chageindex" v-on:chage = "chage"></goodleft>
    <div class="foods-wrapper" ref="foodswrapper">
      <div>
        <div class="foods" :id="item.id" v-for="item in menuList" :key="item.id">
          <div style="height: 26px; background: #f3f5f7;">
            <p style="margin: 0; font-size:12px; color: rgb(147, 153, 159); line-height: 26px;">{{item.name}}</P>
          </div>
          <div class="foodwords" v-for="(list, index) in item.foodlist" :key="index">
            <img class="img" :src='list.image' />
            <div class="words">
              <p class="words-title">{{list.title}}</p>
              <p v-show="showc">{{list.classification}}</p>
              <p style="margin-right: 12px; float:left;">月售{{list.number}}份</p>
              <p>好评{{list.praise}}</p>
              <p style="position: relative; top: 3px; font-weight:700; color: red; line-height:14px; float:left; display: inline-block;">￥{{list.price}}</p>
              <div class="cart-wrapper">
                <cartControl :food="list" v-on:cartadd="cartadd"></cartControl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <cart ref="shopCart" :desc = "distributionfee" :selectFoods = "selectFoods" v-on:decreasenumchargn = "decreasenumchargn" v-on:addnumchargn = "addnumchargn" v-on:cartdel = "cartdel"></cart>
  </div>
</template>

<script>
import goodleft from '@/components/goodleft'
import image from '@/common/img/resource/img/foods1.jpg'
import cart from '@/components/cart'
import cartControl from '@/components/cartControl'
import BScroll from 'better-scroll'
export default {
  name: 'goods',
  data () {
    return {
      menuList: [{
        id: '1',
        name: '热销榜',
        foodlist: [{
          id: '10',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 100,
          num: 0
        }, {
          id: '11',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '2',
        name: '单人特色套餐',
        foodlist: [{
          id: '12',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 2,
          num: 0
        }, {
          id: '13',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 10,
          num: 0
        }]
      }, {
        id: '3',
        name: '特色粥品',
        foodlist: [{
          id: '14',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '15',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '4',
        name: '精选热菜',
        foodlist: [{
          id: '16',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '17',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '5',
        name: '爽口凉菜',
        foodlist: [{
          id: '18',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '19',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '6',
        name: '半成品',
        foodlist: [{
          id: '20',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '21',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '7',
        name: '饭类',
        foodlist: [{
          id: '22',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '23',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '8',
        name: '面类',
        foodlist: [{
          id: '24',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '25',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '9',
        name: '炒饭类',
        foodlist: [{
          id: '26',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '27',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }, {
        id: '10',
        name: '炒面类',
        foodlist: [{
          id: '28',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }, {
          id: '29',
          image: image,
          title: '皮蛋廋肉粥配包子套餐',
          classification: '咸粥',
          number: '1132',
          praise: '100%',
          price: 28,
          num: 0
        }]
      }],
      showc: true,
      distributionfee: 40,
      listheight: [],
      scrolly: '',
      num: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
      this.allheight()
    })
  },
  methods: {
    // 计算总高度
    allheight () {
      let foodlist = document.getElementsByClassName('foods')
      let height = 0
      this.listheight.push(height)
      for (let i = 0; i < foodlist.length; i++) {
        let item = foodlist[i]
        console.log(foodlist[i].offsetHeight)
        height += item.offsetHeight + 20
        this.listheight.push(height)
        console.log(height)
      }
    },
    // 监听滑动事件，计算滑动高度
    init () {
      this.foodsscroll = new BScroll(this.$refs.foodswrapper, {mouseWheel: true, click: true, tap: true, probeType: 3})
      this.foodsscroll.on('scroll', (pos) => {
        this.scrolly = Math.abs(Math.round(pos.y)) + 2
        console.log(this.scrolly)
      })
    },
    cartadd (target) {
      this.$refs.shopCart.drop(target)
    },
    //增加事件
    addnumchargn (id) {
      this.menuList.forEach((menuList) => {
        menuList.foodlist.forEach((foodlist) => {
          if (foodlist.id === id) {
            foodlist.num++
          }
        })
      })
    },
    //减少事件
    decreasenumchargn (id) {
      this.menuList.forEach((menuList) => {
        menuList.foodlist.forEach((foodlist) => {
          if (foodlist.id === id) {
            if (foodlist.num === 1) {
              foodlist.num = 0
            } else {
              foodlist.num--
            }
          }
        })
      })
    },
    //清空事件
    cartdel (obj) {
      this.menuList.forEach((menuList) => {
        menuList.foodlist.forEach((foodlist) => {
          for (let i = 0; i < obj.length; i++) {
            let id = obj[i]
            if (foodlist.id === id) {
              foodlist.num = 0
            }
          }
        })
      })
    },
    //监听子组件chage事件
    chage (e) {
      let foodlist = this.$refs.foodswrapper.getElementsByClassName('foods')
      this.num = e
      let el = foodlist[e]
      this.foodsscroll.scrollToElement(el, 300)
    }
  },
  components: {
    cart,
    cartControl,
    goodleft
  },
  //计算属性
  computed: {
    //计算选出商品数量大于0的商品
    selectFoods () {
      let foods = []
      this.menuList.forEach((menuList) => {
        menuList.foodlist.forEach((foodlist) => {
          if (foodlist.num > 0) {
            foods.push(foodlist)
          }
        })
      })
      return foods
    },
    listleft () {
      let foods = []
      this.menuList.forEach((menuList) => {
        foods.push(menuList)
      })
      return foods
    },
    //计算出要滑动到第几个商品
    chageindex () {
      for (let i = 0; i < this.listheight.length; i++) {
        let height1 = this.listheight[i]
        let height2 = this.listheight[i + 1]
        let seeheight = document.getElementsByClassName('foods-wrapper')
        // 窗口可视高度
        let seeallheight = seeheight[0].clientHeight
        // 子窗口总共可视高度
        let seefirstChild = seeheight[0].firstChild.clientHeight
        let scrollheight = seefirstChild - seeallheight + 2
        console.log(scrollheight)
        console.log(seeheight[0].firstChild.clientHeight)
        console.log(seeheight[0].clientHeight)
        let Y = this.scrolly + i * 2
        if (!height2 || (Y >= height1 && Y < height2)) {
            if (this.scrolly == scrollheight || this.scrolly == scrollheight - 2) {
              console.log(this.listheight.length)
              if (this.num == this.listheight.length - 3){
                return this.num
              }
              return this.listheight.length - 2
            }
            return i
        }
      }
      return 0
    }
  }
}
</script>

<style scoped>
.goods{
position: absolute;
top: 180px;
bottom: 46px;
width: 100%;
overflow: hidden;
}
.foods-wrapper{
position: absolute;
left: 80px;
top: 0px;
right: 0;
overflow: hidden;
height:100%;
}
.foodwords{
margin: 18px;
height: 100px;
overflow: hidden;
display: flex;
position: relative;
}
.img{
height: 65px;
width: 65px;
display: 0 0 75px;
}
.words{
margin-left: 10px;
flex: 1;
}
.words-title{
font-size: 14px;
color: rgb(7, 17, 27);
line-height: 14px;
margin-top: 2px;
}
p{
margin: 0;
padding: 0;
font-size: 10px;
line-height: 10px;
color: rgb(147, 153, 159);
margin-top: 8px;
}
ul{
margin:0;
padding: 0;
background: #f3f5f7;
list-style: none;
}
li{
height: 54px;
width: 80px;
display: table;
}
span{
font-size:12px;
font-weight:200;
line-height: 14px;
display: table-cell;
vertical-align: middle;
padding-left: 12px;
}
.changeColor{
background: #fff;
}
._v-container[data-v-ecaca2b0] {
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.cart-wrapper{
display: inline-block;
float: right;
}
</style>
